<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style type="text/css">
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-weight: 300;
        }

        body {
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            font-weight: 300;
        }

        body ::-webkit-input-placeholder {
            /* WebKit browsers */
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            font-weight: 300;
        }

        body :-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            opacity: 1;
            font-weight: 300;
        }

        body ::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            opacity: 1;
            font-weight: 300;
        }

        body :-ms-input-placeholder {
            /* Internet Explorer 10+ */
            font-family: 'Source Sans Pro', sans-serif;
            color: white;
            font-weight: 300;
        }

        .wrapper {
            background: #393D49 !important;
            background: -webkit-linear-gradient(top left, #50a3a2 0%, #53e3a6 100%);
            background: linear-gradient(to bottom right, #50a3a2 0%, #53e3a6 100%);
            opacity: 0.8;
            position: absolute;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .wrapper.form-success .container h1 {
            -webkit-transform: translateY(85px);
            -ms-transform: translateY(85px);
            transform: translateY(85px);
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 80px 0;
            height: 400px;
            text-align: center;
        }

        .container h1 {
            font-size: 40px;
            -webkit-transition-duration: 1s;
            transition-duration: 1s;
            -webkit-transition-timing-function: ease-in-put;
            transition-timing-function: ease-in-put;
            font-weight: 200;
        }

        .form {
            padding: 20px 0;
            position: relative;
            z-index: 2;
        }

        .form input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            border: 1px solid rgba(255, 255, 255, 0.4);
            background-color: rgba(255, 255, 255, 0.2);
            width: 250px;
            border-radius: 3px;
            padding: 10px 15px;
            margin: 0 auto 10px auto;
            display: block;
            text-align: center;
            font-size: 18px;
            color: white;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
            font-weight: 300;
        }

        .form input:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }

        .form input:focus {
            background-color: white;
            width: 300px;
            color: #53e3a6;
        }

        .form button {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: 0;
            background-color: white;
            border: 0;
            padding: 10px 15px;
            color: #53e3a6;
            border-radius: 3px;
            width: 250px;
            cursor: pointer;
            font-size: 18px;
            -webkit-transition-duration: 0.25s;
            transition-duration: 0.25s;
        }

        .form button:hover {
            background-color: #f5f7f9;
        }
    </style>
</head>
<body>
<!-- 代码 开始 -->
<div class="wrapper">
    <div class="container">
        <h1>LanProxy.org</h1>

        <div class="form">
            <input type="text" class="username" placeholder="">
            <input type="password" class="password" placeholder="">
            <button type="submit" id="login-button"></button>
        </div>
    </div>
</div>

<script src="jquery/jquery-3.1.1.min.js" type="text/javascript"></script>
<script src="jquery/jquery.i18n.properties.min.js" type="text/javascript"></script>
<script>
    $('#login-button').click(function (event) {
        $.ajax({
            type: "POST",
            url: "/login",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                username: $(".username").val(),
                password: $(".password").val()
            }),
            dataType: "json",
            success: function (data) {
                if (data.code == 20000) {
                    setCookie("token", data.data);
                    window.location.href = "/lanproxy-config/";
                }
            },
            error: function (e) {
                alert(e.responseJSON.message);
            }
        });
    });

    function setCookie(name, value) {
        var Days = 30;
        var exp = new Date();
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000);
        document.cookie = name + "=" + escape(value) + ";expires="
            + exp.toGMTString();
    }

    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#login-button").trigger("click");
        }
    });

    /**
     * 设置语言类型： 默认为英文
     */
    var i18nLanguage = "en";

    /*
    设置一下网站支持的语言种类
    zh-CN(中文简体)、en(英语)
     */
    var webLanguage = ['zh-CN', 'en'];

    function initWebLanguage() {
        var navLanguage = navigator.language;
        console.log("user set browser language is " + navLanguage);
        if (navLanguage) {
            var charSize = $.inArray(navLanguage, webLanguage);
            if (charSize > -1) {
                i18nLanguage = navLanguage;
            }
        }
    }

    initWebLanguage();

    jQuery.i18n.properties({
        name: 'lang', //资源文件名称
        path: '/i18n/', //资源文件路径
        mode: 'map', //用Map的方式使用资源文件中的值
        language: i18nLanguage,
        encoding: 'UTF-8',
        callback: function () {//加载成功后设置显示内容
            $('title').html($.i18n.prop('login') + " - LanProxy");
            $('#login-button').html($.i18n.prop('login'));
            $(".username").attr("placeholder", $.i18n.prop('username'));
            $(".password").attr("placeholder", $.i18n.prop('password'));
        }
    });
</script>
<!-- 代码 结束 -->

</body>
</html>
